<template>
<div>
  <div>
    <section class="main_top">
      <div class="main_info">
        <Progress :count="initInfo.totalAmount" :allCount="initInfo.needAmount"></Progress>
      </div>
    </section>
    <Donate :donateUpLimit="initInfo.limitAmount" :allCount="initInfo.currentAmount" @refresh="refresh"></Donate>
    <Information></Information>
    <Honor
      :donateAmount="initInfo.donateAmount ? initInfo.donateAmount : 0"
      :moreCount="initInfo.moreCount ? initInfo.moreCount : 0"
      :commonCount="initInfo.commonCount ? initInfo.commonCount : 0"
      :lessCount="initInfo.lessCount ? initInfo.lessCount : 0"></Honor>
    <Plan></Plan>
    <Processing :totalAmount="initInfo.totalAmount"></Processing>
    <Rank
      :rankInfo="initInfo.rankList"></Rank>
    <Footer></Footer>
  </div>
  <div class="fixed" v-if='isShowFixed'></div>
  <div class="dialog" v-if='isShowDonateDia'>
    <div class="dialog-title">{{dialogInfo.title}}</div>
    <div class="dialog-desc">{{dialogInfo.content}}</div>
    <img :src='dialogInfo.icon' width='60' v-if='dialogInfo.icon' />
    <div class="button-list">
      <div class="button" v-if='dialogInfo.cancelText' @click='diaCancelEvent' style="background: #F5F5F5; color: #727E89;">
        {{dialogInfo.cancelText}}
      </div>
      <div class="button" @click='diaOkEvent' :style="!dialogInfo.cancelText ? 'width: 250px': ''">
        {{dialogInfo.okText}}
      </div>
    </div>
  </div>
  <!-- <div class="share-wrapper">
    <div class="share-bottom">
      <div class="">分享到</div>
      <i class="share-cancel" @click='cancelShare'></i>
      <div class="share-list flex">
        <div class="share-icon" v-for='(item, idx) in shareIconList' :key="idx">
          <img :src='item.src' width="40"/>
          <div class="share-title">{{item.value}}</div>
        </div>
      </div>
    </div>
  </div> -->
</div>
</template>

<script>
// import { Indicator } from 'mint-ui'
import Progress from '../components/home/progress.vue'
import Donate from '../components/home/donate.vue'
import Information from '../components/home/information.vue'
import Honor from '../components/home/honor.vue'
import Plan from '../components/home/plan.vue'
import Processing from '../components/home/processing.vue'
import Rank from '../components/home/rank.vue'
import Footer from '../components/footer.vue'
import request from '../utils/request'
// const thankYou = {
//   title: '感谢你的付出',
//   content: '小拖把小学的捐赠进度被你提升了一大截呢！',
//   icon: './images/icon_3.png',
//   okText: '收下'
// }

export default {
  components: {
    Progress,
    Donate,
    Information,
    Honor,
    Plan,
    Processing,
    Rank,
    Footer,
  },
  data () {
    return {
      showTab: false,
      isShowFixed: false,
      isShowDonateDia: false,
      isStepIndex: true,
      initInfo: {},
      tabList: [
        {
          key: 'detail',
          value: '详细',
          selected: true,
          top: 0
        },
        {
          key: 'honor',
          value: '荣誉',
          selected: false,
          top: 880
        },
        {
          key: 'plan',
          value: '计划',
          selected: false,
          top: 1120
        },
        {
          key: 'process',
          value: '进展',
          selected: false,
          top: 1320
        },
        {
          key: 'rank',
          value: '排行',
          selected: false,
          top: 1360
        }
      ],
      dialogInfo: null,
      isShowShare: false,
      shareIconList: [
        {
          key: 'download',
          value: '保存到手机',
          src: './images/down.png'
        },
        {
          key: 'wechat',
          value: '微信好友',
          src: './images/wechat.png'
        },
        {
          key: 'friend',
          value: '朋友圈',
          src: './images/friend.png'
        },
        {
          key: 'qq',
          value: 'QQ好友',
          src: './images/qq.png'
        },
        {
          key: 'qzone',
          value: 'QQ空间',
          src: './images/qzone.png'
        }
      ]
    };
  },
  methods: {
    onTabClick(tab) {
      var me = this
      this.tabList.forEach((item, index) => {
        if (item.key === tab.key) {
          window.scrollTo(0, tab.top)
          me.$set(me.tabList, index, {
            key: item.key,
            value: item.value,
            selected: true,
            top: item.top
          })
        } else {
          me.$set(me.tabList, index, {
            key: item.key,
            value: item.value,
            selected: false,
            top: item.top
          })
        }
      })
    },
    goback() {
      this.isStepIndex = true
    },
    diaOkEvent() {
      this.isShowFixed = false
      this.isShowDonateDia = false
    },
    diaCancelEvent() {
      this.isShowFixed = false
      this.isShowDonateDia = false
    },
    shareTo() {
      this.isShowFixed = true
      this.isShowShare = true
    },
    cancelShare() {
      this.isShowFixed = false
      this.isShowShare = false
    },
    getInitInfo() { 
      request('/delay/api/welfare/info', 'GET',).then(res => {
        console.log(res)
        // Indicator.close()
        if (res.state === 0) {
          this.initInfo = res.data || {}
        }
      }).catch(res => {
        if (res.reload) {
          this.getInitInfo()
        }
      })
     },
     refresh() {
       this.getInitInfo()
     }
  },
  mounted() {
    document.title = '小拖把公益'
    // Indicator.open()
    this.getInitInfo()
  },
}
</script>

<style lang="less">

</style>